<template>
  <div>
    <input
      :ref="refKey"
      :type="type"
      :value="value"
      placeholder="input something..."
      @input="onInput"
    />
    <slot>typing...</slot>
  </div>
</template>

<script>
export default {
  components: {},
  props: {
    refKey: {
      type: String,
      required: true,
      validator: function(value) {
        return ["username", "password", "code"].indexOf(value) !== -1;
      } //refKey的值必须匹配以上数组字符串中的一个
    },
    value: {
      type: String,
      default: ""
    },
    type: {
      type: String,
      default: "text"
    }
  },
  data() {
    return {
      inputVal: ""
    };
  },
  watch: {},
  computed: {},
  methods: {
    focus: function() {
      this.$refs[this.refKey].focus();
    },
    onInput: function(e) {
      this.$emit("input", e.target.value);

      //通知父组件需要校验数据
      this.$parent.$emit("validate");
    }
  },
  created() {},
  mounted() {
    this.$on("focus", () => {
      this.focus();
    });
    this.$nextTick(function() {
      console.log("this.refKey:", this.refKey);
      // this.focus()
      // this.$refs['password'].focus();
    });
  },
  destroyed() {}
};
</script>
<style lang="scss" scoped>
input:focus {
  border: solid 1px green !important;
  outline: none;
}
</style>